<template>
    <Modal v-model="modal.show" :title="modal.title" footer-hide>
        <div class="detail" v-if="modal.show">
            <p v-for="(item,key,index) in data" :key="index">
                <span class='label'>{{item.title}}</span>
                <span><cardCell :item="detail" :column="item" :index="index"></cardCell></span>
            </p>
        </div>
    </Modal>
</template>
<script>
    // import { formDataMixin } from './formData.js'
    import cardCell from './cardCell'
    export default {
        name:'KyDetail',
        // mixins:[formDataMixin],
        components:{cardCell},
        props:{
            columns:{
                type: Array,
                default: () => [],
            }
        },
        data(){
            return {
                modal:{
                    show:false,
                    title:"详情"
                },
                detail:{}
            }
        },
        computed:{
            data(){
                return this.columns.filter(item => item.key !== 'action' && !['selection','index'].includes(item.type))
            }
        },
        methods:{
            showModal(data,title=''){
                this.detail = data;
                this.modal.show = true;
                this.modal.title = `${title || data.name}详情`;
            }
        }
    }
</script>
<style scoped>
.detail {
  display: table;
  width: 100%;
  border: 1px solid var(--table-border);
  table-layout: fixed;
  word-break: break-all;
}
.detail p {
  display: table-row;
  line-height: 36px;
  text-align: center;
}
.detail p span {
  display: table-cell;
  border-bottom:1px solid var(--table-border);
}
</style>